<#--  chenyi 2018-07-24 16:10:31-->
<!DOCTYPE html>
<html>
<head>
    <title>聊天页面</title>
    <meta charset="utf-8">
    <#include "../header.ftl"/>
    <link rel="stylesheet" href="/css/cy_chat.css" media="all">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="/js/index.js"></script>
    <script src="/js/chat.js"></script>
    <script src="/libs/jquery.snowfall.js"></script>


<style>
img{
max-width:100%;
max-height:100%;
}
</style>
</head>
<body>
<ul class="layui-nav layui-bg-blue">

        <li class="layui-nav-item mobile-none"><B>聊天室</B></li>

        <!--
        <li class="layui-nav-item mobile-none">
            <a href="javascript:;">友情链接</a>
            <dl class="layui-nav-child">
                <dd><a href="http://www.layui.com" target="_blank">layui官网</a></dd>
                <dd><a href="http://layim.layui.com/" target="_blank">layim</a></dd>
                <dd><a href="https://fly.layui.com/case/u/5129040" target="_blank">layui案例</a></dd>
            </dl>
        </li>
        -->


    <li  onclick="listUser()" class="online-count">当前在线人数: <span id="onlineCount">0</span></li>

    <div class="nav-right" style="float: right;">

    <!--
        <li class="layui-nav-item">
            <a href="#" mobile-none><i class="layui-icon layui-icon-face-smile">&#xe60b;</i> 关于</a>
        </li>
    -->

        <li class="layui-nav-item">
                <img src="" id="headPic" class="layui-nav-img">
                <span id="username">${(username)!""}</span>


        </li>


        <li class="layui-nav-item">
            <a href="javascript:CHAT.logout();">
                <i title="退出" class="iconfont icon-guanbi"></i> 退出</a>
        </li>
    </div>
</ul>


<div class="cy-chat-main">
    <ul>

    </ul>

</div>

<div class="cy-chat-footer">
    <div class="cy-chat-tool">
        <div class="face-box" id="faceBox"></div>
        <span class="iconfont  icon-biaoqing" onclick="CHAT.openFace()" title="选择表情"></span>
    <#--<span class="iconfont  icon-jianqie" title="剪切" ></span>-->
        <span class="iconfont  icon-tupian1" onclick="CHAT.chooseFile()" title="发送图片"></span>
        <input id="fileBtn" onchange="CHAT.sendPic(event)" type="file" name="fileName" accept="image/*" value="发送图片"
               style="display: none">
        <span class="iconfont  icon-shouye" onclick="CHAT.sendFlower()" title="鲜花"></span>
    </div>

    <div class="cy-chat-textarea">
       <!-- <textarea @paste="handlePaste($event)" contenteditable="true" id="sendMessage"></textarea> -->

        <div style="height: 100px;border-color:red"  class="img-textarea" @paste="handlePaste($event)" contenteditable="true"  id="sendMessage"></div>

    </div>

    <div class="cy-chat-bottom">
        <div class="cy-chat-send">
            <span class="cy-send-btn" onclick="CHAT.sendText()"> <i class="layui-icon">&#xe609;</i> &nbsp;发送</span>
        </div>
    </div>

</div>


</body>

<script>

    $(function () {
        //初始化WebSocket
        CHAT.init('${(username)!""}');
    });

    layui.use(['element', 'layer'], function () {
        var element = layui.element;
        var layer = layui.layer;
        layer.tips('Ctrl + Enter 发送消息', $(".cy-chat-send"), {
            tips: [4, '#1E9FFF'],
            time: 4000
        });
    });
//富文本粘贴方法

document.addEventListener('DOMContentLoaded', function() {
    var editor = document.getElementById('sendMessage');

    editor.addEventListener('paste', function(e) {
        // 阻止默认粘贴行为
        e.preventDefault();

        // 获取剪切板数据
        var clipboardData = e.clipboardData || window.clipboardData;
        var items = clipboardData.items;

        for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf('image') !== -1) {
                // 图片项
                var blob = items[i].getAsFile();

                // 创建文件URL
                var URL = window.URL || window.webkitURL;
                var source = URL.createObjectURL(blob);

                // 创建Image元素
                var img = new Image();
                img.src = source;

                // 等待图片加载完成
                img.onload = function() {
                    // 释放URL对象
                    URL.revokeObjectURL(source);

                    // 将图片转换为BASE64
                    var canvas = document.createElement('canvas');
                    canvas.width = img.width;
                    canvas.height = img.height;
                    canvas.getContext('2d').drawImage(img, 0, 0);
                    var dataURL = canvas.toDataURL('image/png');

                    // 将BASE64字符串插入到内容中
                    document.execCommand('insertImage', false, dataURL);
                };
            }else if(items[i].type.indexOf('text/plain') !== -1){
                var text = clipboardData.getData('text/plain');
                document.execCommand('insertHTML', false, text);
            }
        }
    });
});


</script>

</html>